<template>
	<view class="container">
		<view
			class="userImg"
			@tap="changeAvatar"
		>
			<image
				class="pic"
				:src="form.showAvatar || defaultAvatar"
				mode=""
			></image>
			<image
				class="camera"
				src="@/static/images/mine/camera.png"
				mode=""
			></image>
		</view>
		<view class="main margin32">
			<view class="title">
				基本资料
			</view>
			<view class="list ">
				<view class="item flexBetween">
					<view class="left flexCenter">
						<view class="label">
							昵称
						</view>
						<input
							class="info"
							type="text"
							v-model="form.nickname"
							placeholder="请输入昵称"
						>
					</view>

				</view>
				<view class="item flexBetween">
					<view class="left flexCenter">
						<view class="label">
							手机号
						</view>
						<input
							class="info"
							type="text"
							v-model="form.mobile"
							placeholder="请输入手机号"
						>
					</view>

					<image
						class="right"
						src="@/static/images/icon/right.png"
						mode=""
					></image>

				</view>
				<view
					class="item flexBetween"
					@tap="show = true"
				>
					<view class="left flexCenter">
						<view class="label">
							所在地
						</view>
						<view class="info">
							{{form.address}}
						</view>
					</view>

					<image
						class="right"
						src="@/static/images/icon/right.png"
						mode=""
					></image>

				</view>

			</view>
		</view>
		<button
			class="submit"
			@tap="query"
		>保存资料</button>
		<cc-selectDity
			:show="show"
			@sureSelectArea="onsetCity"
			@hideShow="show = false"
		></cc-selectDity>
	</view>
</template>

<script>
import defaultAvatar from '@/static/images/mine/add.png'
import basicConfig from '@/config/basicConfig.js'
import { getLocal, toast } from '@/utils/uni'
import { Home } from '@/config/API'
export default {
	data () {
		return {
			defaultAvatar,
			show: false,

			form: {
				mobile: '',
				nickname: '',
				avatar: '',
				showAvatar: '',
				address: '',
			}
		};
	},
	mounted () {
		this.getUserInfo()
	},
	methods: {
		// 获取用户信息
		getUserInfo () {
			Home.userCenter().then(res => {
				let data = res.data
				for (let key of Object.keys(this.form)) {
					this.form[key] = data[key] || ''
				}
				this.form.showAvatar = this.form.avatar
			})
		},
		//选中省市区
		onsetCity (e) {
			console.log(e);
			let data = e.detail.target.dataset;
			let address = data.province + "-" + data.city + "-" + data.area;
			this.show = false
			this.form.address = address
		},
		// 修改资料
		query () {
			Home.profile(this.form).then(res => {
				toast('修改成功')
				setTimeout(() => {
					uni.navigateBack()
				}, 1000)
			})
		},
		// 更换头像
		changeAvatar () {
			uni.chooseImage({
				count: 1,
				success: (chooseImageRes) => {
					const tempFilePaths = chooseImageRes.tempFilePaths;
					uni.showLoading({
						title: '加载中',
						mask: true
					})
					let url = `${basicConfig.baseUrl}api/common/upload`
					// 上传文件
					uni.uploadFile({
						url,
						filePath: tempFilePaths[0],
						name: 'file',
						header: {
							'token': getLocal('token'),
						},
						success: (uploadFileRes) => {
							let data = JSON.parse(uploadFileRes.data)
							console.log("🚀 ~ file: info.vue:162 ~ changeAvatar ~ data:", data)
							if (data.code == 1) {
								toast('上传成功')
								this.form.showAvatar = data.data.fullurl
								this.form.avatar = data.data.url
							} else {
								toast('上传失败')
							}
						},
						complete: _ => {
							uni.hideLoading()
						}
					});
				}
			});
		},
	}
}
</script>

<style lang="scss" scoped>
.userImg {
	position: relative;
	width: 154rpx;
	height: 154rpx;
	margin: 52rpx auto;

	.pic {
		width: 154rpx;
		height: 154rpx;
		border-radius: 50%;
	}

	.camera {
		position: absolute;
		right: 0;
		bottom: 0;
		width: 50rpx;
		height: 50rpx;
	}
}

.main {
	.title {
		font-size: 36rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #272729;
	}

	.list {
		.item {
			margin: 32rpx 0;

			.left {
				.label {
					font-size: 30rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #8d8d99;
					width: 90rpx;
				}

				.info {
					font-size: 30rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
					color: #272729;
					margin-left: 90rpx;
				}
			}

			.right {
				width: 12rpx;
				height: 24rpx;
			}
		}
	}
}

.submit {
	margin-top: 129rpx;
}
</style>